<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Simple Zoom Effects --> <div class="row"> <div class="col-md-12 text-center"><h3>Simple Zoom Effects</h3></div> <div class="col-md-4"> <div class="product-div1"> <div class="img-div1"> <img src="http://placehold.it/350x150" class="img-responsive transition"> </div> </div> </div> <div class="col-md-4"> <div class="product-div1"> <div class="img-div1"> <img src="http://placehold.it/350x150" class="img-responsive transition"> </div> </div> </div> <div class="col-md-4"> <div class="product-div1"> <div class="img-div1"> <img src="http://placehold.it/350x150" class="img-responsive transition"> </div> </div> </div> </div> <!-- Text View --> <div class="row"> <div class="col-md-12 text-center"><h3>Text View</h3></div> <div class="col-md-4"> <div class="product-div2"> <img src="http://placehold.it/350x150" class="img-responsive transition"> <div class="text-view transition"> <h4>View Details</h4> </div> </div> </div> <div class="col-md-4"> <div class="product-div2"> <img src="http://placehold.it/350x150" class="img-responsive transition"> <div class="text-view transition"> <h4>View Details</h4> </div> </div> </div> <div class="col-md-4"> <div class="product-div2"> <img src="http://placehold.it/350x150" class="img-responsive transition"> <div class="text-view transition"> <h4>View Details</h4> </div> </div> </div> </div> </div>

h3{ margin-bottom:30px; margin-top:30px; } /* --------- Global ----------*/ .transition{ transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; } .img-responsive{ width:100%; } /* --------- Simple Zoom Effects ----------*/ .product-div1{ position:relative; overflow:hidden; } .product-div1:hover img{ transform: scale(1.1); } img{ transform: scale(1); } /* --------- Text View ----------*/ .product-div2{ position:relative; overflow:hidden; } .product-div2:hover .text-view{ top: 50%; opacity:1; } .product-div2:hover img{ opacity:.8; } .text-view{ position:absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity:0; }